import { useEffect } from 'react';
import { BarChart3, TrendingUp, Clock, CheckCircle, XCircle, Play, FileText } from 'lucide-react';
import { useAppDispatch } from '@/store';
import { setBreadcrumbs } from '@/store/slices/uiSlice';
import './styles.less';

const Analytics: React.FC = () => {
  const dispatch = useAppDispatch();

  useEffect(() => {
    dispatch(setBreadcrumbs([{ label: '仪表板', path: '/dashboard' }, { label: '数据分析' }]));
  }, [dispatch]);

  return (
    <div className='analytics-page'>
      {/* 页面标题和描述 */}
      <div className='analytics-page__header'>
        <h1 className='analytics-page__title'>数据分析</h1>
        <p className='analytics-page__description'>
          查看视频处理统计、性能指标和趋势分析
        </p>
      </div>

      {/* 筛选器区域 */}
      <div className='analytics-page__filter-section'>
        <div className='analytics-page__filter-header'>
          <h3 className='analytics-page__filter-title'>数据筛选</h3>
        </div>
        <div className='analytics-page__filter-controls'>
          <div className='analytics-page__filter-group'>
            <label className='analytics-page__filter-label'>时间范围</label>
            <select className='analytics-page__filter-select'>
              <option value='7'>最近7天</option>
              <option value='30'>最近30天</option>
              <option value='90'>最近90天</option>
              <option value='custom'>自定义范围</option>
            </select>
          </div>
          <div className='analytics-page__filter-group'>
            <label className='analytics-page__filter-label'>处理类型</label>
            <select className='analytics-page__filter-select'>
              <option value='all'>所有类型</option>
              <option value='convert'>格式转换</option>
              <option value='compress'>视频压缩</option>
              <option value='extract'>音频提取</option>
            </select>
          </div>
          <div className='analytics-page__filter-group'>
            <label className='analytics-page__filter-label'>任务状态</label>
            <select className='analytics-page__filter-select'>
              <option value='all'>所有状态</option>
              <option value='completed'>已完成</option>
              <option value='failed'>失败</option>
              <option value='processing'>处理中</option>
            </select>
          </div>
          <div className='analytics-page__filter-group'>
            <label className='analytics-page__filter-label'>排序方式</label>
            <select className='analytics-page__filter-select'>
              <option value='date'>处理时间</option>
              <option value='duration'>处理时长</option>
              <option value='size'>文件大小</option>
            </select>
          </div>
        </div>
      </div>

      {/* 数据指标卡片 */}
      <div className='analytics-page__content'>
        <div className='analytics-page__grid'>
          {/* 总处理任务 */}
          <div className='analytics-page__metric-card analytics-page__metric-card--primary'>
            <FileText className='analytics-page__metric-icon' />
            <div className='analytics-page__metric-value'>1,247</div>
            <div className='analytics-page__metric-label'>总处理任务</div>
            <div className='analytics-page__metric-trend text-green-600'>
              +12% 较上月
            </div>
          </div>

          {/* 成功任务 */}
          <div className='analytics-page__metric-card analytics-page__metric-card--success'>
            <CheckCircle className='analytics-page__metric-icon' />
            <div className='analytics-page__metric-value'>1,189</div>
            <div className='analytics-page__metric-label'>成功任务</div>
            <div className='analytics-page__metric-trend text-green-600'>
              成功率 95.3%
            </div>
          </div>

          {/* 平均处理时间 */}
          <div className='analytics-page__metric-card analytics-page__metric-card--warning'>
            <Clock className='analytics-page__metric-icon' />
            <div className='analytics-page__metric-value'>3.2</div>
            <div className='analytics-page__metric-label'>平均处理时间(分钟)</div>
            <div className='analytics-page__metric-trend text-red-600'>
              -0.4 较上月
            </div>
          </div>

          {/* 失败任务 */}
          <div className='analytics-page__metric-card analytics-page__metric-card--danger'>
            <XCircle className='analytics-page__metric-icon' />
            <div className='analytics-page__metric-value'>58</div>
            <div className='analytics-page__metric-label'>失败任务</div>
            <div className='analytics-page__metric-trend text-red-600'>
              失败率 4.7%
            </div>
          </div>

          {/* 处理时长 */}
          <div className='analytics-page__metric-card'>
            <Play className='analytics-page__metric-icon text-purple-500' />
            <div className='analytics-page__metric-value text-purple-600'>4,126</div>
            <div className='analytics-page__metric-label'>总处理时长(分钟)</div>
          </div>

          {/* 趋势 */}
          <div className='analytics-page__metric-card'>
            <TrendingUp className='analytics-page__metric-icon text-indigo-500' />
            <div className='analytics-page__metric-value text-indigo-600'>+23%</div>
            <div className='analytics-page__metric-label'>本月处理量增长</div>
          </div>
        </div>

        {/* 图表区域 */}
        <div className='analytics-page__chart-section'>
          <div className='analytics-page__chart-header'>
            <h3 className='analytics-page__chart-title'>处理任务趋势</h3>
            <div className='analytics-page__chart-actions'>
              <button className='btn btn-outline btn-sm'>日视图</button>
              <button className='btn btn-outline btn-sm'>周视图</button>
              <button className='btn btn-primary btn-sm'>月视图</button>
            </div>
          </div>
          <div className='analytics-page__chart-container'>
            <div className='h-64 flex items-center justify-center text-gray-500'>
              <div className='text-center'>
                <BarChart3 className='w-12 h-12 mx-auto mb-4 text-gray-400' />
                <p>图表功能即将推出</p>
              </div>
            </div>
          </div>
        </div>

        {/* 最近处理任务 */}
        <div className='analytics-page__list-section'>
          <div className='analytics-page__list-header'>
            <h3 className='analytics-page__list-title'>最近处理任务</h3>
            <button className='btn btn-outline btn-sm'>查看全部</button>
          </div>
          <div className='analytics-page__list-items'>
            {/* 任务列表项 */}
            <div className='analytics-page__list-item'>
              <div className='analytics-page__list-item-info'>
                <FileText className='analytics-page__list-item-icon' />
                <div className='analytics-page__list-item-text'>
                  <div className='analytics-page__list-item-title'>vacation.mp4 转换</div>
                  <div className='analytics-page__list-item-subtitle'>MP4 → AVI • 2.3 GB</div>
                </div>
              </div>
              <div className='analytics-page__list-item-value'>成功 • 15分钟</div>
            </div>

            <div className='analytics-page__list-item'>
              <div className='analytics-page__list-item-info'>
                <FileText className='analytics-page__list-item-icon' />
                <div className='analytics-page__list-item-text'>
                  <div className='analytics-page__list-item-title'>presentation.mov 压缩</div>
                  <div className='analytics-page__list-item-subtitle'>MOV → MOV • 1.2 GB</div>
                </div>
              </div>
              <div className='analytics-page__list-item-value'>成功 • 8分钟</div>
            </div>

            <div className='analytics-page__list-item'>
              <div className='analytics-page__list-item-info'>
                <FileText className='analytics-page__list-item-icon' />
                <div className='analytics-page__list-item-text'>
                  <div className='analytics-page__list-item-title'>interview.avi 音频提取</div>
                  <div className='analytics-page__list-item-subtitle'>AVI → MP3 • 854 MB</div>
                </div>
              </div>
              <div className='analytics-page__list-item-value'>失败 • 32分钟</div>
            </div>
          </div>
        </div>

        {/* 欢迎卡片 - 显示开发状态 */}
        <div className='analytics-page__welcome-card'>
          <BarChart3 className='analytics-page__welcome-icon' />
          <h2 className='analytics-page__welcome-title'>数据分析功能开发中</h2>
          <p className='analytics-page__welcome-text'>
            我们正在开发详细的数据分析功能，包括图表可视化、趋势分析和性能指标等高级功能
          </p>
        </div>
      </div>
    </div>
  );
};

export default Analytics;
